<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all form-width">
      <el-form-item label="类别名称:" prop="cat_name">
        <el-input
          v-model="form.cat_name"
          placeholder="请输入类别名称 "
        />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parent_id">
        <el-select v-model="form.parent_id" placeholder="请选择" clearable>
          <el-option
            v-for="item in parent"
            :key="item.id"
            :label="item.cat_name"
            :value="item.id"
            @change="cg_select"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="封面图:" prop="thumb">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100"/>
      </el-form-item>
      <el-form-item label="分类描述:" prop="cat_desc">
        <el-input
          type="textarea"
          :rows="5"
          v-model="form.cat_desc"
          placeholder="请输入分类描述"
        />
      </el-form-item>
      <el-form-item label="搜索关键词:" prop="keywords">
        <el-input
          v-model="form.keywords"
          placeholder="请输入搜索关键词"
        />
      </el-form-item>
      <el-form-item label="别名:" prop="cat_alias">
        <el-input
          v-model="form.cat_alias"
          placeholder="请输入别名"
        />
      </el-form-item>
      <el-form-item label="排序:" prop="sort_order">
        <el-input-number
          v-model="form.sort_order"
          placeholder="请输入排序"
        />
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import richText from "../../components/rich_text/rich_text";
export default {
  name:"article_cat_form",
  components: { richText },
  data() {
    return {
      is_change: undefined,
      id: 0,
      parent: [],
      form: {
        id: 0,
        cat_nam: "",
        cat_type: 0,
        parent_id: 0,
        show_in_nav: 0,
        sort_order: 0,
        cat_desc: "",
        keywords: "",
        cat_alias: null,
        thumb: "",
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入类别名称", trigger: "blur" },
        ],
        parent_id: [
          { required: true, message: "请选择上级分类", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {
    cg_select(id) {
      this.form.parent_id = id;
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      if (this.is_show === true) {
        form.content = this.$refs.myQuillEditor.editor_content;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          this.get("/admin/ArticleCat/save", form, "POST").then((e) => {
            this.$msg_ok("success", "操作成功");
            this.$back();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/ArticleCat/info?id=" + this.id, "POST").then((e) => {
        const tpl = e.info.tpl;
        this.parent = e.cate;
        this.form = tpl;
        setTimeout(()=>{this.is_change=false},100)
      });
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
